<template>
  <a-config-provider :locale="locale">
    <div class="wrap flex-wrap">
      <div id="app" class="app-main">
        <router-view />
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
import { isLarkClient } from '@/utils/client'
import NoClient from '@/views/exception/707'

export default {
  components: { NoClient },
  data () {
    return {
      locale: zhCN
    }
  },
  computed: {
    isLarkClient () {
      return isLarkClient()
    }
  },
  mounted () {
    const { $store } = this
    deviceEnquire(deviceType => {
      switch (deviceType) {
        case DEVICE_TYPE.DESKTOP:
          $store.commit('TOGGLE_DEVICE', 'desktop')
          $store.dispatch('setSidebar', true)
          break
        case DEVICE_TYPE.TABLET:
          $store.commit('TOGGLE_DEVICE', 'tablet')
          $store.dispatch('setSidebar', false)
          break
        case DEVICE_TYPE.MOBILE:
          $store.commit('TOGGLE_DEVICE', 'mobile')
          $store.dispatch('setSidebar', true)
          break
      }
    })
  },
  methods: {
  }
}
</script>
<style lang="less">
  #app {
    overflow: hidden;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    background-clip: padding-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #c3c3c3;
  }
  ::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-track:hover {
    background-color: #f0f2f5;
  }
  .title-bar {
    height: 24px;
    background: #16408A;
    -webkit-app-region:drag;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    z-index: 99;
  }
  .title-button  {
    float: right;
    width: 36px;
    height: 24px;
    -webkit-app-region:no-drag;
  }
  .title-button :focus {
    outline: 0!important;
  }
  .miniBtn {
    background: #16408A;
    border: 0;
    color: #E6E6E6;
  }
  .miniBtn:hover {
    background: rgb(34, 92, 192);
    color:#FFFFFF;
  }
  .maxBtn {
    background: #16408A;
    border: 0;
    margin-left: 5px;
    color: #E6E6E6;
  }
  .maxBtn:hover {
    background: rgb(34, 92, 192);
    color:#FFFFFF;
  }
  .closeBtn {
    background: #16408A;
    border: 0;
    margin-left: 5px;
    color: #E6E6E6;
  }
  .closeBtn:hover {
    background: #F5222D;
    color:#FFFFFF;
  }
  .wrap {
    height: 100vh;
   }
  .flex-wrap {
    display: flex;
    flex-direction: column;
  }
  .flex-wrap > .app-main {
    flex: 1;
  }
  .app-main{
    height:100%
  }
</style>
